<!-- 
 * @Author: guanpf 992093924@qq.om
 * @Date: 2023-08-29 20:40:56
 * @LastEditTime: 2023-10-14 20:38:22
 * @LastEditors: guanpf
 * @Description: 
 * @FilePath: /ZCGL_WX/src/views/main/asset/views/receive.vue
 -->
<template>
  <div class="receive">
    <tab :line-width="2" active-color="rgb(80, 119, 185)" custom-bar-width="60px">
      <tab-item selected @on-item-click="handler">借出</tab-item>
      <tab-item @on-item-click="handler">转移</tab-item>
    </tab>
    <div class="list">
      <template v-if="list.length > 0">
        <div class="item" v-for="(item, index) in list" :key="index">
          <div class="label">
            <span class="title">单据编号</span>
            <span class="name">{{ item.orderId }}</span>
          </div>
          <div class="label">
            <span class="title">创建人</span>
            <span class="name">{{ item.userName }}</span>
          </div>
          <div class="label" v-show="active==0">
            <span class="title">创建时间</span>
            <span class="name">{{ item.createTime }}</span>
          </div>
          <div class="label" v-show="active==0">
            <span class="title">借出人</span>
            <span class="name">{{ item.borrowUserName }}</span>
          </div>
          <div class="label" v-show="active==0">
            <span class="title">借出时间</span>
            <span class="name">{{ item.borrowTime }}</span>
          </div>
          <div class="label" v-show="active==0">
            <span class="title">借出期限</span>
            <span class="name">{{ item.indate }}</span>
          </div>
          <div class="label">
            <span class="title">说明</span>
            <span class="name">{{ item.reason || item.message }}</span>
          </div>
          <template v-if="active==0">
            <div
              :class="item.status > 1 ? 'status status-finish' : 'status status-unfinish'"
            >
              {{ item.status == 1 ? "待接收" : "已接收" }}
            </div>
            <div class="label" v-if="item.status == 1" @click="selectItem(index)">
              <x-button class="confirm-btn" @click.native="confirmReceive(item)"
                >确认接收</x-button
              >
            </div>
          </template>
          <template v-else>
            <div
            :class="item.status > 0 ? 'status status-finish' : 'status status-unfinish'"
          >
            {{ item.status == 0 ? "待接收" : "已接收" }}
          </div>
          <div class="label" v-if="item.status == 0" @click="selectItem(index)">
            <check-icon v-model="item.check"></check-icon>
            <x-button class="confirm-btn" @click.native="confirmReceive(item)"
              >确认接收</x-button
            >
          </div>
          </template>
        </div>
      </template>
      <template v-else>
        <no-data></no-data>
      </template>
    </div>
    <div class="submit-box">
      <check-icon v-if="active == 1" :value.sync="allCheck" @click.native="changeAllCheck"
        >全选</check-icon
      >
      <x-button class="submit-btn" @click.native="submit">提交</x-button>
    </div>
  </div>
</template>

<script>
import { XButton, Tab, TabItem, Timeline, TimelineItem, CheckIcon } from "vux";
import AssetApi from "@/api/asset.js";
export default {
  components: {
    XButton,
    Tab,
    TabItem,
    Timeline,
    TimelineItem,
    CheckIcon,
  },
  data() {
    return {
      list: [
        {
          title: "办公用品盘点",
          createBy: "燕子",
          createTime: "2023-05-29 14:28",
          status: "1",
          checkId: 1,
          alreadyCount: 9,
          unreadCount: 10,
        },
        {
          title: "家具盘点",
          createBy: "燕子",
          createTime: "2023-05-29 14:28",
          status: "0",
          checkId: 2,
          alreadyCount: 8,
          unreadCount: 10,
        },
      ],
      active:0,
    };
  },
  mounted() {
    if (this.$route.query.type && this.$route.query.type == 1) {
      this.getTransferReceiveList();
    } else {
      this.getLendReceiveList();
    }
  },
  methods: {
    handler(index) {
      console.log(102,index)
      this.active = index;
      if (index == 0) {
        this.getLendReceiveList();
      } else {
        this.getTransferReceiveList();
      }
    },
    // 获取借出接收
    getLendReceiveList() {
      let _params = {
        page: 1,
        pageSize: 1000,
      };
      AssetApi.findMyBorrowAll(_params).then((res) => {
        if (res.code == "0000") {
          this.list = res.data.records.map((item) => {
            let temp = item;
            temp.check = false;
            return temp;
          });
        }
      });
    },
    // 获取转移接收
    getTransferReceiveList() {
      let _params = {
        page: 1,
        pageSize: 1000,
      };
      AssetApi.receiveTransfer(_params).then((res) => {
        if (res.code == "0000") {
          this.list = res.data.records.map((item) => {
            let temp = item;
            if (item.status > 1) {
              temp.disable = true;
            } else {
              temp.disable = false;
            }
            temp.check = false;
            return temp;
          });
        }
      });
    },
    confirmReceive(item) {
          let _this = this
      this.$vux.confirm.show({
        title: "确认接收",
        content: "确认接收后不可更改",
        onCancel() {},
        onConfirm() {
          console.log(131, _this.active);
          if (_this.active == 0) {
            AssetApi.orderConfirm({ orderId: item.orderId }).then((res) => {
              if (res.code == "0000") {
                this.$vux.toast.show({
                  text: "资产接收确认成功",
                });
                this.getLendReceiveList()
              }
            });
          } else {
            AssetApi.transferConfirm({ id: item.id }).then((res) => {
              if (res.code == "0000") {
                this.$vux.toast.show({
                  text: "资产接收确认成功",
                });
                this.getTransferReceiveList();
              }
            });
          }
        },
      });
      // if(this.active==0)
    },
    changeAllCheck() {
      for (let i in this.list) {
        if (this.list[i].status == 1) {
          this.list[i].check = this.allCheck;
        }
      }
    },
    selectItem(index) {
      this.list[index].check = !this.list[index].check;
      let checkList = this.list.filter((item) => item.check);
      if (checkList.length == this.list.length) {
        this.allCheck = true;
      } else {
        this.allCheck = false;
      }
    },
    submit() {
      let list = this.list.filter((item) => item.check) || [];
      if (list.length == 0) {
        this.$vux.toast.show({
          text: "请选择需要接收的资产",
          type: "warn",
        });
      } else {
        let ids = list.map((item) => {
          return item.id;
        });
        AssetApi.transferConfirm({ id: ids.toString() }).then((res) => {
          if (res.code == "0000") {
            this.$vux.toast.show({
              text: "资产接收确认成功",
            });
          }
        });
      }
    },
    // 跳转详情确认接收
    // toDetail(item){
    //     if(item.status == 1){
    //         if(this.active==0){
    //             this.$router.push({
    //                 path: "receiveLend",
    //                 query: {
    //                     checkId: item.checkId,
    //                     alreadyCount: item.alreadyCount,
    //                     unreadCount: item.unreadCount,
    //                 },
    //             });
    //         }else{

    //         }
    //     }
    // }
  },
};
</script>

<style lang="less" scoped>
.receive{
  padding-bottom:20px;
}
.list {
  height: auto;
  background: #f1f1f1;
  padding: 10px;
  margin-bottom: 50px;
  .item {
    padding: 10px 15px;
    border-radius: 8px;
    background: #fff;
    margin-bottom: 10px;
    position: relative;

    .label {
      display: flex;
      justify-content: flex-start;
      height: 30px;
      line-height: 30px;
      color: rgb(127, 127, 127);

      .title {
        display: inline-block;
        width: 100px;
      }

      /deep/.confirm-btn {
        width: 100px;
        font-size: 13px;
        height: 32px;
        right: 10px;
        position: absolute;
        color: rgb(101, 170, 29);
        border-radius: 16px;

        &:after {
          border: none;
        }
      }
    }
  }
}
.status {
  // color: #fff;
  border-radius: 2px;
  width: 60px;
  height: 24px;
  font-size: 12px;
  line-height: 24px;
  text-align: center;
  position: absolute;
  right: 10px;
  top: 50px;
  // transform: rotate(-20deg);
}
.status-finish {
  color: rgb(101, 170, 29);
}
.status-unfinish {
  color: rgb(160, 159, 160);
}
.submit-box {
  position: fixed;
  bottom: 0;
  width: 100%;
  padding-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 50px;
  padding: 10px 0;
  background: #fff;
  .submit-btn {
    width: 260px;
    height: 36px;
    border-radius: 20px;
    color: #fff;
    margin: 0 auto;
    border-color: rgb(205, 166, 105);
    background: rgb(205, 166, 105);
    line-height: 36px;
    font-size: 16px;
  }
}
</style>
